<template>

  <br><br>
  <el-progress :stroke-width="24" :percentage="progress" status="success"></el-progress>
  <br><br>
  <div v-if="hidden">
    <span>{{number}}.{{subject}}</span><br><br>
    <el-radio v-model="radio" label="1">A.{{option1}}</el-radio><br><br>
    <el-radio v-model="radio" label="2">B.{{option2}}</el-radio><br><br>
    <el-radio v-model="radio" label="3">C.{{option3}}</el-radio><br><br>
    <el-radio v-model="radio" label="4">D.{{option4}}</el-radio><br><br>    
  <el-button style="float: right;margin-right: 300px" type="warning" @click="check">确认</el-button>

  </div>

</template>


<script>
export default {
  name: 'Question',
    data () {
      return {
        progress: 0,
        count: 0,
        score: 0,
        hidden: true,
        answer: '',
        radio: '',
        number: '',
        subject: '',
        option1: '',
        option2: '',
        option3: '',
        option4: '',
        paper: [
          {
            number: 1,
            subject: '坚持四项基本原则是我们的立国之本，坚持（   ）是我们的强国之路。',
            option1: '以经济建设为中心',
            option2: '改革开放',
            option3: '科教兴国战略',
            option4: '五年计划',
            answer: '2' 
          },
          {
            number: 2,
            subject: '中国共产党在领导社会主义事业中，必须坚持以 (   )为中心，其他各项工作都服从和服务于这个中心。',
            option1: '国防建设',
            option2: '经济建设',
            option3: '政治建设',
            option4: '教育建设',
            answer: '2' 
          },
          {
            number: 3,
            subject: '党内（    ）是党的生命',
            option1: '监督',
            option2: '纪律',
            option3: '民主',
            option4: '原则',
            answer: '3' 
          },
          {
            number: 4,
            subject: '企业、农村、机关、学校、科研院所、街道社区、社会团体、社会中介组织、人民解放军连队和其他基层单位，凡是有正式党员(     )，都应当成立党的基层组织。',
            option1: '三人以上的',
            option2: '五人以上',
            option3: '十人以上',
            option4: '二十人以上的',
            answer: '1' 
          },
          {
            number: 5,
            subject: '党的基层委员会每届任期三年至五年，总支部委员会、支部委员会每届任期(    )。',
            option1: '三年或五年',
            option2: '一年或两年',
            option3: '两年或三年',
            option4: '三年或四年',
            answer: '3' 
          }
        ]
      };
    },
  methods: {
    check() {
      if (this.radio === '') {
        this.$message({
          message: '未选择答案',
          type: 'error'
        })
        return;
      }
      if (this.radio === this.answer) {
        this.score += 20;
        this.$message({
          message: '答对啦',
          type: 'success'
        });
      } 
      else {
        this.$message({
          message: '答错啦',
          type: 'warning'
        });
      }

      this.progress += 20;

      if (this.count === 5) {
        this.hidden = false;
        this.$notify({
          title: '完成答题啦',
          message: '您的得分是' + this.score,
          offset: 100
        });
        setTimeout(() => {
          this.$router.push({
            name: 'BlogMain'
          })
        }, 1000)

      }

      this.radio = '';
      this.number = this.paper[this.count].number
      this.subject = this.paper[this.count].subject
      this.option1 = this.paper[this.count].option1
      this.option2 = this.paper[this.count].option2
      this.option3 = this.paper[this.count].option3
      this.option4 = this.paper[this.count].option4
      this.answer = this.paper[this.count].answer
      this.count++
    }
  },
  created() {
      this.number = this.paper[this.count].number
      this.subject = this.paper[this.count].subject
      this.option1 = this.paper[this.count].option1
      this.option2 = this.paper[this.count].option2
      this.option3 = this.paper[this.count].option3
      this.option4 = this.paper[this.count].option4
      this.answer = this.paper[this.count].answer
      this.count++
  }
}
</script>

<style lang="less">

</style>
